<template>
  <div class="left-right2" v-if="pageflag">
    <div class="chart" style="height: 10%">
      <table class="table1" style="height: 100%">
        <tr class="headtr">
          <th
            style="
              width: 20%;
              text-align: center;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 14px;
            "
          >
            序号
          </th>
          <th
            style="
              width: 60%;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1bcff2;
              line-height: 14px;
            "
          >
            企业名称
          </th>
          <th
            style="
              width: 20%;
              font-size: 14px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #fdb528;
              line-height: 14px;
            "
          >
            设备数
          </th>
        </tr>
      </table>
    </div>
    <div class="chart" style="height: 90%">
      <table class="table1">
        <vue-seamless-scroll :data="tableData" class="seamless-warp">
          <ul class="item">
            <li
              v-for="(item, index) in tableData"
              :key="index"
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
              "
            >
              <span
                style="
                  width: 15%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ index + 1 }}</span
              >
              <span
                style="
                  width: 65%;
                  text-align: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                "
                >{{ item.name }}</span
              >
              <span style="width: 15%; text-align: center">{{
                item.deviceCount
              }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </table>
      <span
        v-if="!tableData.length"
        style="
          font-size: 12px;
          text-align: center;
          width: 100%;
          display: block;
          margin-top: 20px;
          color: #ffffff;
        "
        >暂无数据</span
      >
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      pageflag: false,
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  watch: {},
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 企业列表
    getData() {
      // this.$api.screen.getEnterpriseList(this.$parent.$route.query.id).then(res => {
      let res = [
        {
          id: "6294d10c867e4d76834a58e9c460b2f1",
          name: "太仓红马机械设备制造有限公司",
          coordinate: "121.11082532753755,31.5746451969521",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 17,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "7d0fa6bd6c3b434e82a9959d6c943218",
          name: "裕克施乐塑料制品（太仓）有限公司",
          coordinate: "116.4133836971231,39.910924547299565",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 8,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "acaa5b08488b48bc9cfc9351e6130e6f",
          name: "太仓力达莱特精密工业有限公司",
          coordinate: "121.05015952254891,31.50965375326678",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "6761f7fbbae3459f97d28e46719f9848",
          name: "柿沼制冷（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "c85908a5910a42fcb617ed5465806e2e",
          name: "无锡沃德汽车零部件有限公司",
          coordinate: "120.56010027022987,31.545099462884213",
          districtCode: "320205",
          districtName: "锡山区",
          deviceCount: 6,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
      ];
      this.pageflag = true;
      this.tableData = res;
      // }).catch(() => {
      //   this.pageflag = false
      //   this.$message.error('企业列表数据请求失败')
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.left-right2 {
  height: 98%;
  flex: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px 9px 10px;
  .chart::-webkit-scrollbar {
    display: none;
  }
  .chart {
    width: 100%;
    overflow-y: scroll;
    .table1 {
      width: 100%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0px 0px;
      .seamless-warp {
        height: 100%;
        overflow: hidden;
        .item {
          padding: 0px 10px;
        }
      }
      .headtr {
        border-bottom: 1px solid rgba(0, 143, 253, 0.4);
        border-top: 1px solid rgba(0, 143, 253, 0.4);
        line-height: 14px;
        background-color: rgba(7, 73, 155, 0.4);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #71cdf9;
      }
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 36px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
      li:nth-child(2n) {
        height: 36px;
        background-color: rgba(113, 205, 249, 0.1);
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      th {
        height: 17px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(23, 203, 203, 1);
        line-height: 17px;
      }
      td {
        text-align: center;
        color: white;
      }
      .rank1 {
        color: #66c852;
      }
      .rank1 {
        color: #66c852;
      }
      .rank2 {
        color: #fdb628;
      }
      .rank3 {
        color: #ed504c;
      }
    }
  }
}
</style>
